<template>
  <div>
    <div style="margin-top: 15px;" class="Search-Box">
      <el-select
        slot="prepend"
        @change="selectChange"
        class="selectApi"
        v-model="select_str"
      >
        <el-option
          v-for="(items, index) in selectData"
          :label="items.name"
          :value="items.value"
          :key="index"
        ></el-option>
      </el-select>
      <el-input
        placeholder="请输入内容"
        class="input-with-select"
        @input="keyup_Search"
        style="position: relative;"
        v-model="ipt_search"
        @focus="Search_ipt_focus"
        @keydown.enter.native="Search_Enter"
      >
      </el-input>
      <ul ref="Search_list" class="Search_list" v-show="Search_list_show">
        <li
          v-for="item in SearchItems"
          :key="item"
          @click="Search_list_click(item)"
        >
          {{ item }}
        </li>
        <button
          style="border:none;margin-top:10px;"
          class="search_btn"
          @click="Search_ipt_blur"
        >
          <svg
            t="1633667610139"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4771"
            width="30"
            height="30"
          >
            <path
              d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z"
              fill="#5090F1"
              p-id="4772"
            ></path>
            <path
              d="M311.585735 246.935972m6.464976 6.464977l452.54834 452.54834q6.464976 6.464976 0 12.929952l-51.71981 51.71981q-6.464976 6.464976-12.929952 0l-452.54834-452.54834q-6.464976-6.464976 0-12.929952l51.71981-51.71981q6.464976-6.464976 12.929952 0Z"
              fill="#FFFFFF"
              p-id="4773"
            ></path>
            <path
              d="M712.414265 246.935972m6.464976 6.464977l51.71981 51.71981q6.464976 6.464976 0 12.929952l-452.54834 452.54834q-6.464976 6.464976-12.929952 0l-51.71981-51.71981q-6.464976-6.464976 0-12.929952l452.54834-452.54834q6.464976-6.464976 12.929952 0Z"
              fill="#FFFFFF"
              p-id="4774"
            ></path>
          </svg>
        </button>
      </ul>
      <el-button
        slot="append"
        icon="el-icon-search"
        class="Search_btn"
        @click="Search_click"
      >
      </el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Search-Box",
  data() {
    return {
      select_str: "百度",
      ipt_search: "",
      Search_list_show: false,
      select_Api_Str:
        "http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug", //默认百度API
      selectData: [
        {
          name: "百度",
          value:
            "http://suggestion.baidu.com/su?wd=#content#&cb=window.baidu.sug"
        },
        {
          name: "必应",
          value:
            "http://api.bing.com/qsonhs.aspx?type=cb&q=#content#&cb=window.bing.sug"
        },
        {
          name: "谷歌",
          value:
            " http://suggestqueries.google.com/complete/search?client=youtube&q=#content#&jsonp=window.google.ac.h"
        }
      ],
      SearchItems: ""
    };
  },
  mounted() {},
  methods: {
    Search_ipt_blur() {
      this.Search_list_show = false;
    },
    Search_ipt_focus() {
      if (this.ipt_search != "") {
        //输入框为空不显示ul数据板块
        this.Search_list_show = true;
      }
    },
    Search_Enter() {
      //输入框回车
      this.Search_click();
    },
    Search_list_click(value) {
      //点击智能提示后补全输入框，并且重定向
      this.ipt_search = value;
      this.Search_click();
    },
    Search_click() {
      if (this.ipt_search !== "") {
        if (this.select_Api_Str.search("bing") != -1) {
          window.open(`https://cn.bing.com/search?q=${this.ipt_search}`);
        } else if (this.select_Api_Str.search("baidu") != -1) {
          window.open(`https://www.baidu.com/s?wd=${this.ipt_search}`);
        } else {
          window.open(`https://www.google.com.hk/search?q=${this.ipt_search}`);
        }
      } else {
        alert("啥都没输入你想搜个啥!!!");
      }
    },
    keyup_Search(value) {
      let this1 = this; //记录当前Vue实例对象（不然拿不到实例中的Dom）
      this.Search_list_show = true;
      if (this.select_Api_Str.search("bing") != -1) {
        window.bing = {
          sug: function(json) {
            const arr = [];
            for (let items of json.AS.Results[0].Suggests) {
              arr.push(items.Txt);
            }
            this1.SearchItems = arr;
          }
        };
      } else if (this.select_Api_Str.search("baidu") != -1) {
        window.baidu = {
          sug: function(json) {
            this1.SearchItems = json.s;
            console.log(this1.SearchItems);
            // console.log(this1.$refs.Search_list);
          }
        };
      } else {
        window.google = {
          ac: {
            //谷歌的搜索提示
            h: function(json) {
              const arrGoole = [];
              for (let items of json[1]) {
                arrGoole.push(items[0]);
              }
              this1.SearchItems = arrGoole;
              console.log(arrGoole);
            }
          }
        };
      }
      //动态添加JS脚本
      let script = document.createElement("script");
      script.src = this.select_Api_Str.replace("#content#", value);
      document.body.appendChild(script);
    },
    selectChange(value) {
      //选项发生改变时候，拿到对应value赋值给对应变量
      this.select_Api_Str = value;
    }
  }
};
</script>

<style lang="scss" scoped>
.input-with-select {
  width: 50rem;
}
.Search-Box {
  position: relative;
}
.Search_list {
  width: 50rem;
  box-sizing: border-box;
  height: auto;
  position: absolute;
  top: 2.5rem;
  left: 50%;
  transform: translateX(-48.5%);
  padding: 10px 15px;
  background-color: white;
  text-align: left;
  font-size: 18px;
  opacity: 0.6;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  li {
    margin: 8px 0;
  }
}

// .Search_btn {
//   background-color: #006cbe !important;
//   color: white !important;
// }

.selectApi {
  width: 5rem;
}
// .el-select,
// .el-input {
//   width: 550px;
// }
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
